<template>
  <div class="Practical-Training-page">
    <el-pagination
      :currentPage="currentPage"
      :pageSize="pageSize"
      :page-sizes="[10, 15, 20, 30]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import { ref, toRefs } from "vue";

//子组件接收父组件传递的值
const props = defineProps({
  total: {
    type: Number,
    default: 0,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  size: {
    type: String,
    default: "default",
  },
  background: {
    type: Boolean,
    default: true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

//將值结构出来
const { total, currentPage, pageSize, size, background, disabled } =
  toRefs(props);
const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  currentPage.value = val;
};
</script>
<style lang="scss" scoped>
.Practical-Training-page {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;
  margin-top: 34px;
}
</style>
